﻿@using System.Web
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机构设置</title>
    <!-- 引入样式 -->

    @* <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script> *@
    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }

        .solid-table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

            .solid-table td, .solid-table th {
                border: 1px solid #333;
                padding: 8px;
                text-align: left;
                word-break: break-all;
            }

        .bj {
            background-color: #FFD553;
            font-weight: bold;
        }
    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>您正在做的业务是:人力资源管理--薪酬标准管理--薪酬标准登记查询</span><br />


        <table class="solid-table">
            <thead>
                <tr class="bj">
                    <th v-for="(header, index) in salaryStandardDetailsHeaders" :key="index">{{ header }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                    <td><a href="#" v-on:click="ffbh(index)">{{ item.standard_id }}</a></td>
                    <td>{{ item.standard_name }}</td>
                    <td>{{ item.designer }}</td>
                    <td>{{ item.regist_time }}</td>
                    <td>{{ item.salary_sum }}</td>

                </tr>
            </tbody>
        </table>
        @* <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="standard_id" label="薪酬标准编号"></el-table-column>
            <el-table-column prop="standard_name" label="薪酬标准名称"></el-table-column>
            <el-table-column prop="designer" label="制定人"></el-table-column>
            <el-table-column prop="regist_time" label="登记时间"></el-table-column>
            <el-table-column prop="salary_sum" label="薪酬总额"></el-table-column>
        </el-table> *@
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[ 2, 4,6,8]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       prev-text="上一页"
                       next-text="下一页">
        </el-pagination>
    </div>



    <script type="text/javascript">
        // 定义一个辅助函数用于解码UTF-8字符串
        function decodeUtf8(encodedStr) {
            // 处理URI编码的情况
            if (encodedStr.includes('%')) {
                return decodeURIComponent(encodedStr);
            }

            // 处理普通字符串情况
            return encodedStr;
        }

        // 去除字符串两端的引号
        function removeQuotes(str) {
            if (str && typeof str === 'string') {
                // 移除开头的引号
                if (str.startsWith('"')) {
                    str = str.substring(1);
                }
                // 移除结尾的引号
                if (str.endsWith('"')) {
                    str = str.substring(0, str.length - 1);
                }
            }
            return str;
        }

        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const tableData = ref([]);
                const currentPage = ref(1);
                const pageSize = ref(4);
                const total = ref(0);
                const bh = ref("@ViewBag.bh");
                const Name = ref(removeQuotes(decodeUtf8('@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Name, true))')));
                const datak = ref("@ViewBag.Datak");
                const dataj = ref("@ViewBag.Dataj");
                const salaryStandardDetailsHeaders = ref(['薪酬标准编号', '薪酬标准名称', '制定人', '登记时间', '薪酬总额']);

                const handleSizeChange = (newSize) => {
                    pageSize.value = newSize;
                    fill();
                };

                const handleCurrentChange = (newPage) => {
                    currentPage.value = newPage;
                    fill();
                };

                function ffbh(row){
                    let totalCount = tableData.value[row];
                    let standard_id = totalCount.standard_id;
                    parent.mainFrame.location.href='@Url.Action("Server2", "SS_Search")' + '?s_id=' + standard_id;
                }

                function fill() {
                    // 对所有字符串参数进行编码
                    const params = new URLSearchParams({
                        bh: bh.value,
                        Name: Name.value,
                        datak: datak.value,
                        dataj: dataj.value,
                        i: currentPage.value,
                        p: pageSize.value
                    });

                    axios.get(`/SS_Search/Index2?${params}`)
                        .then(res => {
                            console.info(res.data);
                            tableData.value = res.data.list.itemas;
                            total.value = res.data.list.total;
                        })
                        .catch(err => {
                            console.error('数据加载失败:', err);
                            ElMessage.error('数据加载失败，请重试');
                        });
                }

                fill();

                return {
                    tableData,
                    fill,
                    currentPage,
                    pageSize,
                    total,
                    handleSizeChange,
                    handleCurrentChange,
                    bh,
                    Name,
                    datak,
                    dataj,
                    salaryStandardDetailsHeaders,
                    ffbh
                };
            }
        });

        app.use(ElementPlus).mount('#app');
    </script>
</body>
</html>